/*
 * @Author: your name
 * @Date: 2021-05-12 07:55:19
 * @LastEditTime: 2021-05-13 07:54:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \api\lib\pages\apis\button\button_home_page.dart
 */
import 'package:flutter/material.dart';

class ColumnHomePage extends StatefulWidget {
  @override
  _ColumnHomePageState createState() => _ColumnHomePageState();
}

class _ColumnHomePageState extends State<ColumnHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: Text('column配置'),
        ),
        // 线性布局，
        // 布局竖直方向上的widget  呈线性排列
        // 默认 在height是填充 父布局
        // 默认 在width是包裹 子widget
        // 当column的父布局有明确的width 限制 也是填充父布局

        body: SizedBox(
          width: 500,
          height: 400,
          child: Column(
            // MainAxisSize.min 在column外层没有高度限制的时候，会在竖直方向上包裹子widget max 竖直方向上填满

            mainAxisSize: MainAxisSize.min,
            // 次方向 start 左对齐  center 默认 居中 end 右对齐
            crossAxisAlignment: CrossAxisAlignment.center,
            // 主方向 start 默认 上对齐  center 居中对齐  end 下下对齐
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // Column 权重布局 -- Expanded表示占满剩余空间 flex 是占的比例
              Expanded(
                flex: 1,
                child: Container(
                    color: Colors.blue,
                    width: 220,
                    height: 28,
                    margin: EdgeInsets.only(top: 20)),
              ),
              Expanded(
                flex: 1,
                child: Container(
                    color: Colors.blue,
                    width: 220,
                    height: 28,
                    margin: EdgeInsets.only(top: 20)),
              )
            ],
          ),
        ));
  }
}
